<!DOCTYPE html>
<html>
 
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas动画</title>
    <style>
        div,
        h1 {
            text-align: center
        }
 
        canvas {
            background-color: aqua;
        }
    </style>
</head>
 
<body>
    <h1>张嘴吃豆子</h1>
    <div>
        <canvas id="c2" width="500" height="400"></canvas>
    </div>
    <script>
        var ctx = c2.getContext("2d");//创建画笔
        var flag = true;//设置条件
        var eyes = function () {//绘制眼睛
            ctx.beginPath();//开始路径
            ctx.arc(275, 100, 10, 0 * Math.PI / 180, 360 * Math.PI / 180);//创建圆弧
            ctx.strokeStyle = "black";//设置样式
            ctx.lineWidth = 20;//设置线宽
            ctx.stroke();//描边
        };
        var eyeball = function () {//绘制眼球
            ctx.beginPath();//开始路径
            ctx.arc(280, 100, 4, 0 * Math.PI / 180, 360 * Math.PI / 180);//创建圆弧
            ctx.strokeStyle = "#fff";//设置样式
            ctx.lineWidth = 8;//设置线宽
            ctx.stroke();//描边
        };
        var face = function () {//绘制张嘴时的脸
            ctx.beginPath();//开始路径
            var start = 45;//起始角
            var end = 315;//结束角
            ctx.arc(250, 200, 150, start * Math.PI / 180, end * Math.PI / 180);//创建圆弧
            ctx.lineTo(250, 200);//画直线
            ctx.closePath();//闭合路径
            ctx.strokeStyle = "red";//设置样式
            ctx.lineWidth = 10;//设置线宽
            ctx.stroke();//描边
            eyes();//调用画眼睛
            eyeball();//调用画眼球
        };
        var face1 = function () {//绘制闭嘴时的脸
            ctx.beginPath();//开始路径
            var start1 = 0;//起始角
            var end1 = 360;//结束角
            ctx.arc(250, 200, 150, start1 * Math.PI / 180, end1 * Math.PI / 180);//创建圆弧
            ctx.lineTo(250, 200);//画直线
            ctx.strokeStyle = "red";//设置样式
            ctx.lineWidth = 10;//设置线宽
            ctx.stroke();//描边
            eyes();//调用画眼睛
            eyeball();//调用画眼球
        };
        var ball = function () {//绘制张嘴时的豆子
            x = 350;//设定圆弧x坐标
            ctx.beginPath();//开始路径
            ctx.arc(x, 200, 10, 0 * Math.PI / 180, 360 * Math.PI / 180);//创建圆弧
            ctx.strokeStyle = "yellow";//设置样式
            ctx.lineWidth = 20;//设置线宽
            ctx.stroke();//描边
        };
        var ball1 = function () {//绘制闭嘴时的豆子
            x1 = 450;//设定圆弧x坐标
            ctx.beginPath();//开始路径
            ctx.arc(x1, 200, 10, 0 * Math.PI / 180, 360 * Math.PI / 180);//创建圆弧
            ctx.strokeStyle = "yellow";//设置样式
            ctx.lineWidth = 20;//设置线宽
            ctx.stroke();//描边
        };
        var clear = function () {//清除画布函数
            ctx.clearRect(0, 0, 500, 400)
        };
 
        setInterval(function () {//设定定时器,切换状态
            if (flag == true) {
                clear();
                face();
                ball();
                flag = false
            } else if (flag == false) {
                clear();
                face1();
                ball1();
                flag = true
            }
        }, 300)
 
    </script>
</body>
 
</html>
